<template>
  <el-form class="fp-select-config" label-placement="left" label-width="auto">
    <el-form-item label="key">
      <el-input placeholder="请输入该参数key" v-model:value="formData.key" />
    </el-form-item>
    <el-form-item label="展示名">
      <el-input placeholder="请输入该参数展示名称" v-model:value="formData.label" />
    </el-form-item>
    <el-form-item label="提示语">
      <el-input placeholder="请输入该参数提示语" v-model:value="formData.placeholder" />
    </el-form-item>
    <el-form-item label="默认值">
      <el-input placeholder="请输入该参数默认值" v-model:value="formData.defaultValue" />
    </el-form-item>
    <el-form-item label="选项值" class="multi-lines">
      <div v-if="formData.options.length <= 0" class="line">
        <div class="content">
          <el-input placeholder="label" />
          <div class="symbol">-</div>
          <el-input placeholder="value" />
        </div>
        <div class="edit-bar">
          <el-button type="primary" :icon="Plus as any" circle size="small" />
          <el-button type="danger" :icon="Minus as any" circle size="small" />
        </div>
      </div>
      <div v-else v-for="(item, index) in formData.options" :key="index" class="line">
        <div class="content">
          <el-input v-model:value="(item as any).label" placeholder="label" />
          <div class="symbol">-</div>
          <el-input v-model:value="(item as any).value" placeholder="value" />
        </div>
        <div class="edit-bar">
          <el-button type="primary" :icon="Plus as any" circle size="small" />
          <el-button type="danger" :icon="Minus as any" circle size="small" />
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FPSelectDescription } from '@/components/function-parameter/fp-select/index'
import { Minus, Plus } from '@icon-park/vue-next'

const props = defineProps({
  description: {
    type: Object as () => FPSelectDescription,
    required: false
  }
})

const formData = ref({
  key: props.description?.key || '',
  label: props.description?.label || '',
  placeholder: props.description?.placeholder || '',
  defaultValue: props.description?.defaultValue || '',
  options: props.description?.options || []
})
</script>

<style scoped lang="scss">
.fp-select-config {
  .multi-lines {
    --el-button-size: 15px;

    .line {
      margin-bottom: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content {
        display: flex;
        align-items: center;
        flex-grow: 1;

        .symbol {
          padding: 0 5px;
        }
      }

      .edit-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-button {
          margin: 0 3px;
        }
      }
    }
  }
}
</style>
